<template>
  <div>
    <!-- 工艺路线  -->
    <div class="topBtn">
      <div class="sizeBig"><span>工艺路线</span></div>
      <div >
        <el-button type="primary" @click="lookLog">
          <i class="icon-look"></i> 查看工艺日志
        </el-button>        
        <el-button type="primary" @click.native="setRelation">
          <i class="icon-set"></i>设置关联  
        </el-button>
        <el-button type="primary" @click="forbidden">
          <i class="icon-close"></i>禁用</el-button>
        <el-button type="primary" @click="Enable">
          <i class="icon-qiy"></i>启用</el-button>
        <el-button type="primary" @click="add">
          <i class="iconfont icon-addNew"></i> 新增
        </el-button>
        <el-button type="primary" @click="edit()" icon="el-icon-edit">修改</el-button>
        <el-button type="primary" @click="remove" icon="el-icon-delete">删除</el-button>
      </div>
    </div>
    <div class="message">
      <p class="character">
        对维护好的工序进行组合关联，形成一条独立的生产工艺路线。工艺路线设置是为了确保产品能按照系统维护好的标准工艺执行。
        <span class="skip">查看帮助文档</span>
      </p>
    </div> 

    <div class="all">
      <div class="main">
        <div class="inputcontent1">
          <el-input v-model="search1" placeholder="请输入内容" class="inSearch1" @keydown.native.enter="init"></el-input>
          <div class="iconSearch1"></div>
        </div>
        <div class="tablesize">
          <Table :reset='reset' v-on:getTec="getTechn" v-on:getId="getListId" id="out-table" v-on:changeData="changedata"></Table>

          <!-- 分页 -->
          <div class="block">
            <el-pagination
              @current-change="handleCurrentChange"
              :page-sizes="[6]"
              :page-size="2"
              layout="total, sizes, prev, pager, next, jumper"
              :total="TotalNum">
            </el-pagination>
          </div>
        </div>

        <div class="bottom">
          <div>
            <h4>工艺路线详情</h4>
          </div>          
          <div class="goFlow">            
            <Diagram :val='addlist' ref="diagram"></Diagram>
          </div>
        </div>
      </div>

      <div class="right">
        <div class="inputcontent2">
          <el-input v-model="search2" placeholder="请输入内容" class="inSearch2"></el-input>
          <div class="iconSearch2"></div>
        </div>
        <div class="condition">
          <div class="con_title">
            <h4>工艺路线关联条件</h4>
          </div>
          <div class="tableCon">
            <Table1 :tableData="tableData"></Table1>
          </div>
        </div>
      </div>    
    </div>

    <!-- 新增弹出框 --> 
    <el-dialog
      title="新增数据"
      :visible.sync="addDialogVisible"
      width="600px">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="formName"
        label-width="140px"
        class="demo-ruleForm">
        <el-form-item label="工艺路线名称：" prop="name">
          <el-input v-model="ruleForm.name" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="工艺路线备注：" prop="remark">
          <el-input v-model="ruleForm.remark" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click.native="addDialogVisible=false">关闭</el-button>
          <el-button type="primary" @click="submitForm('formName')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 修改弹出框 -->
    <el-dialog
      title="修改数据"
      :visible.sync="editDialogVisible"
      width="600px">
      <el-form
        :model="editInfo"
        :rules="rules"
        ref="editForm"
        label-width="140px"
        class="demo-ruleForm">
        <el-form-item label="工艺路线ID：" prop="routeID" v-show="false">
          <el-input v-model="editInfo.routeID" style="width:350px" disabled></el-input>
        </el-form-item>
        <el-form-item label="工艺路线名称：" prop="name">
          <el-input v-model="editInfo.name" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="工艺路线备注：" prop="remark">
          <el-input v-model="editInfo.remark" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click.native="editDialogVisible=false">关闭</el-button>
          <el-button type="primary" @click="editSubmitForm('editForm')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 设置关联弹出框 -->
    <el-dialog title="设置工艺路线关联" center :visible.sync="setDialogVisible" width="800px">
      <Table2 :productList="productList" :val="addlist" ref="setRelations"></Table2>
    </el-dialog>

    <!-- 工艺路线日志 -->
    <el-dialog  title="查看工艺日志" center :visible.sync="dialogLogVisible" width="600px">
      <Table3 :logData='logData'></Table3>
      <!-- 分页 -->
      <div class="block1">
        <el-pagination
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
          :current-page="currentPage1"
          :page-sizes="[10,20,30,40]"
          :page-size="size1"
          layout="total, sizes, prev, pager, next, jumper"
          :total="TotalNum1">
        </el-pagination>
      </div>

      <div class="botBtn">
        <el-button class="quxiao" @click.native="dialogLogVisible=false">取消</el-button>
        <el-button class="queding" type="primary" @click="removeLogSubmit()">删除</el-button>
      </div>
    </el-dialog>
  </div>
</template>  

<script>
import { getTechRouteTechList } from "@/api/technology";
import {
getTechRoutePageList,//获取
insertTechRoute,//新增
updateTechRoute,//修改
startOrStopTechRoute,//禁用
removeTechRoute, // 删除
setTechRouteByTech,//工艺路线-配置工序
removeTechRouteByTech,//工艺路线-取消工序
getTechRouteProductList,//产品详情
// getTechRouteTechList,//工序详情
getTechRouteLog, //工艺日志
} from '@/api/technology'

import {getTechPageList} from "@/api/process"
import Table from "./components/technologyTable";
import Table1 from "./components/technologyConTable";
import Table2 from "./components/technologySetRelation";
import Table3 from "./components/technologyLogTable";
import Diagram from "./components/diagram";
import {delay} from '@/utils/autoSearch'
import go from "gojs";

export default {
  name: "technology",
  components: {
    Table,
    Table1,
    Table2,
    Table3,
    Diagram
  },
  data(){
    return{
      search1:"",
      search2:"",
      reset:[],
      checkIds: [], //勾选的id数组
      addlist: [], //勾选传过来的数据
      diagramData:[],//流程图数据
      logData:[], //工艺路线日志数据
      productList:[],//产品列表
      techList:[], //工序列表
      tableData:[], // 工艺路线关联条件

      currentData:{},
      diagramList:[],

      // CurrentPage: 1,//页码
      TotalNum:0,//总条数
      currentPage1:1,
      size1:10,
      TotalNum1:0,

      addDialogVisible:false, //新增弹出框
      editDialogVisible:false, //修改弹出框
      setDialogVisible:false, //设置关联弹出框
      dialogLogVisible:false, //查看工艺日志弹出框
      ruleForm:{
        name:'',
        remark:''
      },
      editInfo:{
        routeID:'',
        name:'',
        remark:''
      },
       rules:{
        name: [
          { required: true, message: "请输入工艺路线名称", trigger: "blur" },
        ],
        remark: [
          { required: true, message: "请输入工艺路线备注", trigger: "blur" },
        ]
      },
      
    }
  },
  watch:{
    //用来监听页面变量的改变
    //监听搜索，300ms执行一次fetchData方法（去搜索）
    search1() {
      delay(() => {
        this.fetchData();
      }, 300);
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    getTechn(val){
      this.currentData = val 
      this.$refs.diagram.onSubmit()
      this.inSubmit()  
    },
    // 自动搜索的方法
    async fetchData(val){
      this.init({keyName:this.search1})
    },
    // 分页
    handleCurrentChange(val){
      getTechRoutePageList({ keyName:this.search1,page:val,pageSize:6}).then(res => {
        if (parseInt(res.Code) === 1) {
          this.reset = res.Result.Items;
        }
      })
    },
    // 请求数据
    init(){
      this.reset = [];
      getTechRoutePageList({ keyName:this.search1,page:1,pageSize:6}).then(res => {
        if (parseInt(res.Code) === 1) {
          this.reset = res.Result.Items;
          this.TotalNum = res.Result.TotalNum
        }
      })  
    },
    //日志分页
    handleSizeChange1(size){
      this.size1 = size
      getTechRouteLog({businessType:6,page:1,pageSize:this.size1}).then(res =>{
        if (parseInt(res.Code) === 1) {
          this.logData = res.Result.Items
          this.TotalNum1 = res.Result.TotalNum
        }
      })
    },
    handleCurrentChange1(currentPage){
      this.currentPage1 = currentPage
      getTechRouteLog({businessType:6,page:this.currentPage1,pageSize:this.size1}).then(res =>{
        if (parseInt(res.Code) === 1) {
          this.logData = res.Result.Items
          this.TotalNum1 = res.Result.TotalNum
        }
      })
    },
    // 查看工艺日志
    lookLog(){     
      this.dialogLogVisible = true
      getTechRouteLog({businessType:6,page:1,pageSize:10}).then(res =>{
        if (parseInt(res.Code) === 1) {
          this.logData = res.Result.Items
          this.TotalNum1 = res.Result.TotalNum
          console.log(this.logData)
        }
      })
    },
    // 设置关联
    setRelation:function(){
      if(this.addlist.length !== 1){
        this.$message('请勾选一项');
      }else{        
        this.setDialogVisible = true;     
        this.$refs.setRelations.init()  
      }
    },

    //工艺路线关联条件
    inSubmit(){
      // if(this.checkIds.length !== 1){
      //   this.$message('请勾选一项')
      // }else{
        this.tableData= []
        getTechRouteProductList({techRouteId:this.currentData.TechRouteId}).then(res => {
          if (parseInt(res.Code) === 1) {
            this.tableData = res.Result.ProductList;          
          }
        })
      // }
    },
    // 新增
    add(){
      this.ruleForm = {}
      this.addDialogVisible = true
    },
    submitForm(formName){
      this.$refs[formName].validate((valid) =>{
        if(valid){
          insertTechRoute(this.ruleForm).then(res => {
            if(res.Code === 1){
              this.init()
              this.ruleForm = {}
              this.addDialogVisible = false
            }
          });
        }else {
          console.log('error submit!!')
          return false;
        }
      })
    },
    getListId(listId) {
      this.checkIds = listId;
    },
    changedata(data) {
      this.addlist = data;
      console.log(this.addlist)
    },
    // 修改
    edit(index,row){
      if(this.addlist.length !== 1){
        this.$message('请勾选一项');
      }else{
        this.editDialogVisible = true
        this.editInfo.routeID = this.addlist[0].TechRouteId
        this.editInfo.name = this.addlist[0].Name
        this.editInfo.remark = this.addlist[0].Remark
      }
    },
    editSubmitForm(editForm){
      this.$refs[editForm].validate((valid)=>{
        if(valid){
          updateTechRoute(this.editInfo).then(res=>{
            if(parseInt(res.Code)=== 1){
              this.$message({
                type:'success',
                message:'修改成功'
              })
              this.editDialogVisible = false
              this.init()
            }
          })
        }else{
          console.log('error submit!!');
          return false;
        }
      })
    },
    // 禁用
    forbidden(){
      if(this.checkIds.length !== 1){
        this.$message('请勾选一项需要禁用的数据')
      }else {
        if(this.addlist[0].Status === 0){
          this.$message('已禁用')
        }else{
          let data = {routeID:this.addlist[0].TechRouteId,status:0}
          startOrStopTechRoute(data).then(res=>{
            if(parseInt(res.Code) === 1){
              this.$message({
                type:'success',
                message:'禁用成功'
              })
              this.init()
            }
          })
        }
      }
    },
    // 启用
    Enable() {
      if(this.addlist.length>0){
        if(this.addlist[0].Status === 1){
          this.$message('已启用')
        }else{
          let data = { routeID:this.checkIds[0],status:1}
          startOrStopTechRoute(data).then(res=>{
            if (parseInt(res.Code) === 1) {
              this.$message({
                type: 'success',
                message: '启用成功!'
              })
              this.init()
            }
          })  
        }     
      }else{
        this.$message('请勾选需要启用的工艺路线数据')
      }
    },
    // 删除
    remove(){
      if(this.addlist.length !== 1){
        this.$message('请勾选一项需要删除的工艺路线')
      }else{
        this.$confirm('此操作将永久删除选中的仓库数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => { 
          removeTechRoute({routeID:this.addlist[0].TechRouteId}).then(res => {
            if(parseInt(res.Code) === 1){
              this.$message({
                type:'success',
                message:'删除成功'
              })
            }
            this.init()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });    
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.sizeBig{
    font-size: 16px;
}
.topBtn {
  height: 60px;
    width: 98%;
    margin: 0 auto;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
  .icon-look{
    display: inline-block;
    width: 11px;
    height: 12px;
    margin:0 3px 2px 0;
    background: url("image/chakanrizhi.png") no-repeat;
    vertical-align: middle;
  }
  .icon-set{
    display: inline-block;
    width: 12px;
    height: 12px;
    margin:0 3px 2px 0;
    background: url("image/guanlian.png") no-repeat;
    vertical-align: middle;
  }
  .icon-close{
    display: inline-block;
    width: 12px;
    height: 12px;
    margin:0 3px 2px 0;
    background: url("image/jinyong.png") no-repeat;
    vertical-align: middle;
  }
  .icon-qiy{
    display: inline-block;
    width: 13px;
    height:13px;
    margin:0 3px 2px 0;
    background: url("image/qiyong.png") no-repeat;
    vertical-align: middle;
  }
}
.message {
  width: 98%;
  margin: 0 auto;
  height: 60px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(238, 238, 238, 1);
  font-size: 14px;
  .character {
    margin: 20px 0 21px 20px;
    color: #999999;
    .skip {
      color: #0095ff;
      margin-left: 10px;
      cursor: pointer;
    }
  }
}

.all {
  width: 98%;
  margin: 0 auto;
  .main {
    float: left;
    width: 76%;
    height: 700px;
    .inputcontent1{
      float: left;
      width: 308px;
      margin: 0 auto;
      height: 80px;
      position: relative;
      padding-top: 21px;
      .inSearch1 {
        width: 100%;
        height: 40px;
        line-height: 40px;
      }
      .iconSearch1 {
        position: absolute;
        left: 270px;
        top: 32px;
        width: 16px;
        height: 17px;
        background-image: url("../system/user/image/搜索.png");
        background-repeat: no-repeat;
        cursor: pointer;
      }
    }
    .tablesize {
      width: 100%;
      height: 358px;
      margin-top: 80px;     
    }

    .bottom {
      margin-top: 20px;
      height: 202px;
      border: 1px solid rgba(238, 238, 238, 1);
      h4 {
        float: left;
        margin-top: 17px;
        margin-left: 21px;
        font-size: 14px;
        color: #333;
      }
     
      .goFlow{
        float: left;
        width:96%;
        height:149px;
        margin-left:1%;
        margin-top:10px;
      }
    }
  }
  .right {
    float: right;
    width: 23%;
    height: 580px;   
    .inputcontent2{
      width: 81%;
      height: 80px;
      position: relative;
      padding-top: 21px;
      box-sizing: border-box;
      .inSearch2 {
        float: left;
        width: 100%;
        height: 40px;
        line-height: 40px;
      }
      .iconSearch2 {
        position: absolute;
        left: 90%;
        top: 34px;
        width: 16px;
        height: 17px;
        background-image: url("../system/user/image/搜索.png");
        background-repeat: no-repeat;
        cursor: pointer;
      }
    }
    .condition{
      width: 100%;
      height: 580px;
      border: 1px solid rgba(238, 238, 238, 1);
      overflow: hidden;
      .con_title {
        width: 100%;
        height: 53px;     
        // border-bottom: 1px solid rgba(238, 238, 238, 1);       
        h4 {
          float: left;
          // margin-top: 17px;
          // margin-left: 21px;
          margin: 17px 0 20px 21px;
          font-size: 14px;
          color: #333;
        }
        #submit{
          float: right;
          margin-top: 10px;         
          margin-right: 10px;
        }
        .tableCon{
          width: 100%;
          height: 545px;
        }
      }
    }    
  }
}
.tablesize {
  position: relative;
  width: 98%;
  margin: 0 auto;
  border: 1px solid #eeeeee;
}
.block {
  position: absolute;
  right: 5px;
  bottom: 0;
}
.block1{
  // float: right;
  margin: 20px 0 20px 100px;
  // margin-bottom: 20px;
}
.botBtn{
  text-align: center;
  margin-top: 20px;
  .quxiao{
    margin-right: 20px;
  }
  .queding{
    margin-left: 20px;
  }
}
</style>
